<template>
   <div class="header">
      <!-- 头部左边 -->
       <div class="header-left">
          <div class="iconfont icon-fanhui back-icon"></div>

       </div>
       <!-- 头部输入框  -->
       <div class="header-input">
          <span class="iconfont icon-sousuo"></span> 输入城市/游玩/主题
       </div>
       <!-- 头部右边 -->
        <router-link to="/city">
          <div class="header-right">
            {{this.city}} <span class="iconfont icon-xiangxia arrow-icon"></span>
          </div>
        </router-link>
  </div>

</template>

<script>
export default {
  name: "HomeHeader",
  props:{
    city:String
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
 .header
   display:flex
   height :.86rem
   line-height :.86rem
   background :$bgColor
   color :#fff
   .header-left
     width :.64rem
     float: left
     .back-icon
       text-align :center
       font-size : .4rem

   .header-input
     flex:1
     height :.64rem
     line-height :.64rem
     margin-top :.12rem
     margin-left :.2rem
     padding-left:.2rem
     background :#fff
     border-radius :.1rem
     color :#ccc

   .header-right
      width 1.24rem
      float :right
      text-align :center
      color :#fff
      .arrow-icon
        font-size : .24rem

</style>
